<template>
  <view class="order-detail">
    <view class="form-container">
      <view class="box">
        <u-form :model="form" ref="uForm" :errorType="errorType">
          <u-form-item
            :leftIconStyle="{ color: '#f00', fontSize: '14rpx' }"
            left-icon="star-fill"
            :label-style="{ fontSize: '14px', color: '#666666' }"
            label-width="185"
            label="施工内容："
            prop="construction_content"
          >
            <u-input
              border
              type="textarea"
              v-model="form.construction_content"
            />
          </u-form-item>
          <u-form-item
            :leftIconStyle="{ color: '#f00', fontSize: '14rpx' }"
            left-icon="star-fill"
            :label-style="{ fontSize: '14px', color: '#666666' }"
            label-width="185"
            label="施工单位："
            prop="construction_enterprises"
          >
            <u-input border v-model="form.construction_enterprises" />
          </u-form-item>
          <u-form-item
            :leftIconStyle="{ color: '#f00', fontSize: '14rpx' }"
            left-icon="star-fill"
            :label-style="{ fontSize: '14px', color: '#666666' }"
            label-width="185"
            label="施工地点："
            prop="construction_address"
          >
            <u-input
              border
              v-model="form.construction_address"
              placeholder="请输入施工地点"
            />
          </u-form-item>
          <u-form-item
            :leftIconStyle="{ color: '#f00', fontSize: '14rpx' }"
            left-icon="star-fill"
            :label-style="{ fontSize: '14px', color: '#666666' }"
            label-width="185"
            label="材料数量："
            prop="materials_number"
          >
            <u-input
              border
              v-model="form.materials_number"
              placeholder="请输入材料数量"
              type="number"
            />
          </u-form-item>
          <u-form-item
            :leftIconStyle="{ color: '#f00', fontSize: '14rpx' }"
            left-icon="star-fill"
            :label-style="{ fontSize: '14px', color: '#666666' }"
            label-width="185"
            label="施工进度："
            prop="construction_scheduling"
          >
            <u-input
              border
              v-model="form.construction_scheduling"
              placeholder="请输入进度(百分比)"
              type="number"
              class="custom-input"
            >
              <!-- 修正 template 位置，确保在 u-input 标签内 -->
            </u-input>
          </u-form-item>
          <u-form-item
            :leftIconStyle="{ color: '#f00', fontSize: '14rpx' }"
            left-icon="star-fill"
            :label-style="{ fontSize: '14px', color: '#666666' }"
            label-width="185"
            label="选择客户："
            prop="customerId"
          >
            <!-- <view style="width: 100%" @click="showCustomer = true">
              <u-input
                v-model="form.customer"
                disabled
                disabledColor="#ffffff"
                placeholder="请选择"
                border
                style="pointer-events: none"
              ></u-input>
            </view> -->
            <CustomSelect v-model="form.customer_id" :options="customerList" :customerForm="customerForm"/>
          </u-form-item>
          <u-form-item
            :leftIconStyle="{ color: '#f00', fontSize: '14rpx' }"
            left-icon="rm"
            :label-style="{ fontSize: '14px', color: '#666666' }"
            label-width="185"
            label="备注："
          >
            <u-input border v-model="form.remark" placeholder="请输入备注" />
          </u-form-item>
          <view class="sumbitWrap">
            <view class="buttonBox">
              <u-button type="primary" @click="submit()">提交</u-button>
            </view>
          </view>
        </u-form>

        <u-select
          mode="single-column"
          :list="customerList"
          v-model="showCustomer"
          @confirm="selectICustomerConfirm"
        ></u-select>
      </view>
    </view>
    <view class="history-container">
      <h3 style="margin-bottom: 5px">历史记录</h3>
      <view
        v-for="(item, index) in historyData"
        :key="index"
        class="history-item"
      >
        <text>施工内容: {{ item.construction_content }}</text>
        <text>施工单位: {{ item.construction_enterprises }}</text>
        <text>施工人员: {{ item.construction_participants }}</text>
        <text>施工地点: {{ item.construction_address }}</text>
        <text>材料数量: {{ item.materials_number }}</text>
        <text>施工进度: {{ item.construction_scheduling }}%</text>
        <text>备注: {{ item.remark }}</text>
        <text>创建人: {{ item.creator_name }}</text>
        <text>创建时间: {{ item.create_time }}</text>
      </view>
    </view>
  </view>
</template>
 <script>
import api from "@/common/utils/api"; //接口
import CustomSelect from "@/components/CustomSelect.vue";

export default {
  components: {
    CustomSelect,
  },
  data() {
    return {
      constructionContent: "",
      address: "",
      progress: "",
      historyData: [],
      form: {
        construction_content: "", // 施工内容
        construction_enterprises: "", // 施工单位
        construction_participants: "", // 施工人员
        construction_address: "", // 施工地点
        customer_id: "",
      },
      errorType: ["toast"],
      rules: {
        construction_content: [
          {
            required: true,
            message: "请输入施工内容",
            trigger: ["change", "blur"],
          },
        ],
        construction_enterprises: [
          {
            required: true,
            message: "请输入施工单位",
            trigger: ["change", "blur"],
          },
        ],
        construction_participants: [
          {
            required: true,
            message: "请输入施工人员",
            trigger: ["change", "blur"],
          },
        ],
        construction_address: [
          {
            required: true,
            message: "请输入施工地点",
            trigger: ["change", "blur"],
          },
        ],
        materials_number: [
          {
            required: true,
            message: "请输入材料数量",
            trigger: ["change", "blur"],
          },
        ],
        construction_scheduling: [
          {
            required: true,
            message: "请输入施工进度",
            trigger: ["change", "blur"],
          },
        ],
        customer_id: [
          {
            required: true,
            message: "请选择客户",
            trigger: ["change", "blur"],
          },
        ],
      },
      poh_id: "", // 订单ID
      customerList: [],
      showCustomer: false,
      customerForm:{
        customerDisabled:false,
        customer_id:""
      },
    };
  },
  onLoad() {
    if (this.$route.query.row) {
      let row = JSON.parse(this.$route.query.row);
      let index = this.$route.query.index;
      this.poh_id = row.poh_id;
      this.getServiceHistory(row.poh_id);
      this.getCustomerList();
      if(row.customer_id){
        this.form.customer_id = row.customer_id;
        this.form.customer_code = row.customer_code;
        this.customerForm = {
          customerDisabled:true,
          customer_id:row.customer_id
        };
      }
    }
  },
  methods: {
    getServiceHistory(poh_id) {
      api
        .serviceHistory({
          limit: 1,
          size: 1000,
          poh_id,
        })
        .then((res) => {
          if (res.success) {
            this.historyData = res.data.Rows;
          }
        });
    },
    getCustomerList() {
      api
        .getCustomerList({
          limit: 1,
          size: 10000,
        })
        .then((res) => {
          if (res.success) {
            this.customerList = res.data.Rows;
          }
        });
    },
    // selectICustomerConfirm(e) {
    //   this.form.customer = e[0].label;
    // },
    submit() {
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          let userInfo = uni.getStorageSync("userInfo");
          let selectCustomerData = this.customerList.find(
            (item) => item.bcId == this.form.customer_id
          );
          this.form.customer_code = selectCustomerData.bcCode;
          let that = this;
          uni.showLoading({
            title: "加载中",
          });
          api
            .addSaleservice({
              construction_order_detailEntity: {
                ...this.form,
                poh_id: this.poh_id, // 替换为实际的 poh_id 值
              },
            })
            .then((res) => {
              if (res.success) {
                uni.hideLoading();
                uni.showToast({
                  title: "提交成功!",
                  icon: "none",
                  mask: true,
                });
                setTimeout(function () {
                  const pages = getCurrentPages();
                  // 返回刷新页面进度
                  if (pages.length > 1) {
                    // 存在上一个页面，返回上一页
                    uni.navigateBack();
                    uni.$emit("refreshProgress", {
                      formData:
                        that.form,
                      index: that.$route.query.index,
                    });
                  } else {
                    // 没有上一个页面，跳转到首页
                    uni.reLaunch({ url: "/pages/home/index" });
                  }
                }, 1000);
              }
            })
            .finally((e) => {});
        }
      });
    },
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
};
</script>
  
<style scoped>
.order-detail {
  padding: 16rpx;
}
.form-container {
  padding: 0 10rpx;
}
.uinput {
  /* width: calc(100% - 20px); */
  /* padding: 10px; */
  /* margin-bottom: 10px; */
  /* border: 1px solid #ccc;
  border-radius: 4px; */
}
button {
  width: 100%;
  background-color: #00796b;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  height: 44px;
  line-height: 44px;
}
.history-container {
  margin-top: 20px;
  padding: 0 16rpx;
}
.history-item {
  display: flex;
  flex-direction: column;
  padding: 10rpx;
  border-bottom: 1px solid #ccc;
}
text {
  margin: 4rpx 0;
}
.custom-input::after {
  content: "%"; /* 或者使用图标 */
  position: absolute;
  right: 10px; /* 根据需要调整位置 */
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; /* 确保点击穿透到输入框 */
}
</style> 